<template>
     <t-dialog
      v-model:visible="visibleModal"
      header="列配置"
      mode="modal"
      draggable
      :on-confirm="() => (visibleModal = false)"
    >
      <template #body>
        
        <t-space direction="vertical">
            <div>请选择需要在表格中显示的数据列</div>
            <t-checkbox :checked="checkAll" :indeterminate="indeterminate" :on-change="handleSelectAll">全选</t-checkbox>
            <t-checkbox-group v-model="value1" :options="options1" />
        </t-space>
      </template>
    </t-dialog>
</template>
<style scoped>
</style>
<script setup>
import { ref,computed } from 'vue';
const checkAll = computed(() => options1.length === value1.value.length);
const handleSelectAll = (checked) => {
  value1.value = checked ? ['选项一', '选项二', '选项三'] : [];
};
const value1 = ref(['选项一']);
const visibleModal = ref(false);
const open = () => {
    visibleModal.value = true;
}
const options1 = [
  { value: '选项一', label: '选项一' },
  { value: '选项二', label: '选项二' },
  { value: '选项三', label: '选项三' },
];
const indeterminate = computed(() => !!(options1.length > value1.value.length && value1.value.length));
const { displayColumns } = defineProps(['displayColumns'])
defineExpose({
    open,
})
</script>